<template>
  <div>
    <el-dialog
      v-el-drag-dialog
      title="关联客户"
      :visible.sync="visible"
      width="85%"
      @closed="reset"
    >
      <div class="page-main ">
        <div class="border" style="width: 60%;">
          <div class="info-title">
            <span class="title-icon" />
            <span>已选择客户</span>
          </div>
          <lb-table
            ref="lbTable_left"
            v-loading="$loadingPlugin.fetchData"
            border
            element-loading-text="加载中"
            :column="tableDataLeft.column"
            :data="tableDataLeft.data"
            highlight-current-row
            :total="tableDataLeft.total"
            custom-column
            height="550"
          />
          <div class="tips">您已选择{{ tableDataLeft.total }}个用户</div>
        </div>
        <div style="width: 40%; margin-left: 10px;">
          <div class="border">
            <div class="info-title">
              <span class="title-icon" />
              <span>组信息</span>
            </div>
            <p style="display: flex; margin: 20px 0;">
              <span class="info" :title="groupInfo.groupName" style="width: 40%;">组名称：{{ groupInfo.groupName }}  </span>
              <span class="info" :title="groupInfo.groupCode" style="width: 30%;">客户组号：{{ groupInfo.groupCode }}  </span>
              <span class="info" :title="groupInfo.groupType" style="width: 30%;">组类型：{{ formatColumnMap(groupTypeMap, 'value', groupInfo.groupType, 'desc') }}  </span>
            </p>
            <p style="display: flex; margin: 20px 0;">
              <span class="info" :title="groupInfo.contact" style="width: 40%;">联系人：{{ groupInfo.contact }}  </span>
              <span class="info" :title="groupInfo.contactPhone" style="width: 30%;">联系电话：{{ groupInfo.contactPhone }}  </span>
            </p>
            <p v-show="groupInfo.createTime" style="display: flex; margin-top: 18px;">
              <span class="info" style="width: 40%;">创建时间：{{ groupInfo.createTime ? parseTime(groupInfo.createTime, '{y}-{m}-{d} {h}:{i}:{s}') : '' }}   </span>
              <span class="info" :title="groupInfo.remark" style="width: 60%;">备注：{{ groupInfo.remark }}   </span>
            </p>
            <div class="info-title">
              <span class="title-icon" />
              <span>客户信息</span>
            </div>
            <el-form ref="dataForm" class="form" :model="dataForm" label-position="right" label-width="80px">
              <el-form-item label-width="0" prop="csmPhone" class="block">
                <el-input v-model.trim="dataForm.text" placeholder="请输入">
                  <el-select slot="prepend" v-model="dataForm.type" style="width: 100px;" placeholder="请选择">
                    <el-option label="营业执照" :value="'cardNo'" />
                    <el-option label="客户编号" :value="'csmCode'" />
                  </el-select>
                  <el-button slot="append" class="append-search" @click="searchCms">查询</el-button>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
          <!-- 左下部分 -->
          <div class="border" style="width: 100%; margin-top: 10px;">
            <p style="margin-bottom: 5px;">客户列表 <el-button class="append-search" @click="addCsmToTable">添加</el-button></p>
            <lb-table
              ref="tableData_right"
              v-loading="$loadingPlugin.fetchData"
              border
              stripe
              element-loading-text="加载中"
              :column="tableDataRight.column"
              :data="tableDataRight.data"
              highlight-current-row
              :total="tableDataRight.total"
              custom-column
              height="300"
              pagination
              :immediate-fetch="false"
              @fetch="fetchDataRight"
              @selection-change="selectRightTable"
            />
          </div>
        </div>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button :loading="$loadingPlugin.del" type="danger" @click="cancel()">
          取消
        </el-button>
        <el-button :loading="$loadingPlugin.success" type="primary" @click="sumbit()">
          关联
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { queryCsmGroupDetailList, addCustomerGroup } from '@/api'
  import { formatColumnMap, parseTime } from '@/utils'
  //   import { mapGetters } from 'vuex'
  //   import { mergeAsyncFunc } from '@/utils/mergeAsyncFunc'

  export default {
    components: {

    },
    props: {
      groupTypeMap: {
        type: Array,
        default: () => []
      },
      subTypeAllList: {
        type: Array,
        default: () => []
      }
    },
    data() {
      return {
        formatColumnMap,
        parseTime,
        visible: false,
        groupInfo: {},
        dataForm: {
          type: 'cardNo',
          text: ''
        },
        rules: {},
        selectCsmList: [],
        tableDataLeft: {
          data: [],
          total: 0,
          column: [
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 105
              // render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.csmCode}</el-link>
            },
            {
              prop: 'csmName',
              label: '客户名称'
            },
            {
              prop: 'sfzh',
              width: 200,
              showOverflowTooltip: true,
              label: '身份证号'
            },
            {
              prop: 'subType',
              label: '用气性质',
              width: 110,
              render: (h, { row }) => <span>{ row.subType ? formatColumnMap(this.subTypeAllList, 'value', row.subType, 'label') : ''}</span>
            },
            {
              prop: 'nearStationName',
              width: 150,
              showOverflowTooltip: true,
              label: '所属机构'
            },
            {
              prop: 'csmRgPhone',
              width: 110,
              showOverflowTooltip: true,
              label: '联系电话'
            },
            {
              label: '操作',
              width: 50,
              align: 'center',
              render: (h, { row, column, $index }) => (
              <el-link
                underline={false}
                onClick={() => {
                  this.delCms(row, $index)
                }}
                type='danger'
              >
                删除
              </el-link>
            )
            }
          ]
        },
        tableDataRight: {
          data: [],
          total: 0,
          column: [
            {
              type: 'selection'
            },
            {
              prop: 'csmCode',
              label: '客户编号',
              width: 105
              // render: (h, { row }) => <el-link underline={false} onClick={() => this.openCsmDetail(row)}>{row.csmCode}</el-link>
            },
            {
              prop: 'csmName',
              label: '客户名称'
            },
            {
              prop: 'sfzh',
              width: 200,
              showOverflowTooltip: true,
              label: '身份证号'
            },
            {
              prop: 'subType',
              label: '用气性质',
              width: 110,
              render: (h, { row }) => <span>{ row.subType ? formatColumnMap(this.subTypeAllList, 'value', row.subType, 'label') : ''}</span>
            },
            {
              prop: 'nearStationName',
              width: 150,
              showOverflowTooltip: true,
              label: '所属机构'
            },
            {
              prop: 'cardNo',
              showOverflowTooltip: true,
              label: '营业执照'
            },
            {
              prop: 'csmRgAddress',
              width: 200,
              showOverflowTooltip: true,
              label: '地址'
            }
          ]
        }
      }
    },
    computed: {

    },
    watch: {

    },
    mounted() {

    },
    destroyed() {

    },
    methods: {
      open(temp) {
        return new Promise(resolve => {
          this.resolve = resolve

          if (temp) {
            // console.log(temp)
            this.groupInfo = temp
          }
          this.visible = true
        })
      },
      addCsmToTable() {
        this.tableDataLeft.data.map((item1) => {
          this.selectCsmList.map((item2) => {
            if (item1.csmId === item2.csmId) {
              // 添加属性用来标记相同的对象
              item2.isRepeat = true
              this.$message.warning('客户已重复！')
            }
          })
        })
        this.selectCsmList.map((item) => {
          // 通过标记筛选对象
          if (!item.isRepeat) {
            this.tableDataLeft.data.push(item)
          }
        })
        this.tableDataLeft.total = this.tableDataLeft.data.length
      },
      searchCms() {
        if (!this.dataForm.text) {
          this.$message.warning('请输入查询条件')
          return
        }
        this.fetchDataRight({ currentPage: 1, pageSize: 20 })
      },
      async fetchDataRight({ currentPage, pageSize }) {
        const query = {
          currentPage,
          pageSize
        }
        query[this.dataForm.type] = this.dataForm.text
        const res = await queryCsmGroupDetailList(query)
        this.tableDataRight.data = res.data.rows
        this.tableDataRight.total = res.data.total
        console.log(this.tableDataRight.data)
      },
      selectRightTable(val) {
        console.log(val)
        this.selectCsmList = val
      },
      // 取消
      async cancel(formName) {
        await this.reset()
        this.visible = false
      },
      // 保存
      async sumbit() {
        if (this.tableDataLeft.data.length === 0) {
          this.$message.warning('请选择关联客户')
          return
        }
        const params = {
          groupCode: this.groupInfo.groupCode,
          groupType: this.groupInfo.groupType,
          groupName: this.groupInfo.groupName,
          contact: this.groupInfo.contact,
          contactPhone: this.groupInfo.contactPhone,
          detailList: this.tableDataLeft.data
        }
        const res = await addCustomerGroup(params)
        if (res.data) {
          this.resolve()
          this.visible = false
          this.$notify({
            title: '提示',
            message: '保存成功',
            type: 'success',
            duration: 2000
          })
          if (!this.groupInfo.createTime) {
            this.$parent.cancel()
          }
        }
      },
      // 删除
      delCms(row, index) {
        this.tableDataLeft.data.splice(index, 1)
        --this.tableDataLeft.total
      },
      reset() {
        this.selectCsmList = []
        this.tableDataRight.data = []
        this.tableDataLeft.data = []
        this.groupInfo = {}
        this.dataForm = {
          type: 'cardNo',
          text: ''
        }
      }
    }
  }
</script>

<style lang='scss' scoped>
.form1 {
  & /deep/ .el-form-item {
    margin-right: 0;
  }
}
.form {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 33.3%;
    height: 20px;
    margin-right: 0;
    margin-bottom: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.form_right {
  display: flex;
  flex-wrap: wrap;
  & /deep/ .el-form-item {
    width: 40%;
    padding-right: 10px;
    .el-form-item__content > .el-select {
      width: 100%;
    }
  }
  .block {
    width: 100%;
  }
}
.info-title {
  display: flex;
  align-items: center;
  margin-top: 8px;
  margin-bottom: 10px;
  font-size: 14px;
  .title-wrapper {
    display: flex;
    align-items: center;
  }
  .title-icon {
    display: inline-block;
    width: 4px;
    height: 14px;
    margin-right: 6px;
    background: $themeColor;
  }
  span {
    font-weight: 700;
    color: $themeColor;
  }
}
.flex {
  justify-content: space-between;
}
.page-main {
  display: flex;
  box-sizing: border-box;
  .left {
    width: 50%;
    padding: 5px;
    // border: 1px solid #ebeff6;
  }
  .width100 {
    width: 99%;
  }
  .fold-div {
    i {
      cursor: pointer;
    }
  }
  .right {
    width: 50%;
    padding: 5px;
  }
  .info {
    display: inline-block;
    overflow: hidden;
    font-size: 14px;
    color: #999;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: bottom;
  }
  .border {
    padding: 10px 5px;
    border: 1px solid #ebeff6;
    .tips {
      padding: 5px 0 0 5px;
      color: #01999f;
    }
  }
  p {
    padding: 0;
  }
}
</style>
